<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Blog登录</title>
    <link rel="icon" href="../static/image/titleImage.png" type="image/x-icon"/>
    <script src="../static/js/jquery/jquery-3.3.1.js"></script>
    <script src="../static/js/bootstrap-3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../static/js/bootstrap-3.3.7/css/bootstrap-dialog.min.css">
    <link rel="stylesheet" href="../static/js/bootstrap-3.3.7/css/bootstrap.css">
    <script src="../static/js/bootstrap-3.3.7/js/bootstrap-dialog.min.js"></script>
    <!--<script src="../static/js/project/login.js"></script>-->
    <script src="../static/js/vue/vue.js"></script>
    <script src="../static/js/vue/vue-resource.js"></script>
    <script src="../static/js/mockjs/mock.js"></script>
</head>
<body>
<div style="padding-top: 100px;"/>

<div class="form row" id="vue-register">
    <form class="form-horizontal col-sm-offset-5 col-md-offset-4" id="register_form">
        <h3 class="form-title">注册</h3>
        <div class="col-sm-9 col-md-6">
            <div class="form-group">
                <i class="fa fa-user fa-lg"></i>
                <input class="form-control required" type="text" placeholder="username" name="username"
                       v-model="username" autofocus="autofocus"/>
            </div>
            <div class="form-group">
                <i class="fa fa-lock fa-lg"></i>
                <input class="form-control required" type="password" placeholder="password" id="register_password"
                       v-model="password" name="password"/>
            </div>
            <div class="form-group">
                <i class="fa fa-check fa-lg"></i>
                <input class="form-control required" type="password" placeholder="re-type Your Password"
                       v-model="repeat_username" name="rpassword"/>
            </div>
            <div class="form-group">
                <i class="fa fa-envelope fa-lg"></i>
                <input class="form-control email" type="text" placeholder="email" name="email" v-model="email"/>
            </div>
            <div class="form-group">
                <hr/>
                <a href="./login.html" id="login_btn" class="">登录</a>
            </div>
            <div class="form-group">
                <button v-on:click="register" class="btn btn-success pull-right">注册</button>
            </div>
        </div>
    </form>
</div>
</body>

<script>
    const loginUrl = "http://localhost:8090/blog/user/register";

    let register = new Vue({
        el: "#vue-register",
        data: {
            username: "",
            password: "",
            repeat_username: "",
            email: "dmj1161859184@126.com"
        },
        methods: {
            register() {
                if (this.password!==this.repeat_username){
                    alert("俩次输入的密码不一致");
                    return;
                }
                debugger;
                Vue.http.post(loginUrl, {
                    username: this.username,
                    email: this.email,
                    password: this.password
                },).then(function (response) {
                    debugger;
                    console.log("成功返还:" + response);
                    var body = response.body;
                    console.log("body:" + body);
                    if (body.status === 'SUCCESS') {
                        alert("注册成功!");
                    } else {
                        var errorMessage = body.errorMessage;
                        alert("注册失败，异常信息是:" + errorMessage);
                    }
                }, function (error) {
                    console.log("错误返还:" + error);
                })
            }
        },
        computed: {}
    });
</script>
</html>